<template>
    <div class="detail">
        <div class="title">
            <span>
                期数:
                <input class="inputs" type="text" v-model="numIss" placeholder="请输入期数"> 
                <el-button @click.native="toMore" size="mini" type="primary">确定</el-button>    
                未开奖</span>
                
            <br />
            <el-checkbox v-model="isWin">中奖</el-checkbox>
        </div>
        <div class="list">
            <el-table
                class="tables"
                border
                size="mini"
                :header-cell-style="{background:'#ccc'}"
                :data="list"
                stripe
                style="width: 100%"
                show-summary
                :summary-method="getSummaries"
            >
                <el-table-column prop="num" label="号码" min-width="40"></el-table-column>
                <el-table-column prop="itemAmount" label="金额" min-width="30"></el-table-column>
                <el-table-column prop="odds" label="赔率" min-width="30"></el-table-column>
                <el-table-column prop="profit" label="盈亏" min-width="30">
                    <template slot-scope="scope">
                        <span>{{scope.row.profit/100000}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="statusName" label="状态" min-width="40"></el-table-column>
                <el-table-column  min-width="40">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status==1?true:false" @click.native="toBack(scope.row)" size="mini" type="primary">退码</el-button>  
                    </template> 
                </el-table-column>
            </el-table>
        </div>
        <el-pagination :current-page.sync="curpages" :pager-count="5" @current-change="fy" :page-size="100" background layout="prev, pager, next" :total="total"></el-pagination>
    </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
    name: "detail",
    data() {
        return {
            isWin: false,
            list: [],
            pages: 1,
            total:10,
            numIss:this.$route.query.id,
            curpages:1,

        };
    },
    computed: {
        ...mapState(["saveType","curMsg","user"])
    },
    watch: {
        saveType() {
            this.getCur();
        },
        isWin() {
            this.getCur();
        }
    },
    created() {
        if(this.$route.query.id == undefined){
            this.numIss = this.curMsg.issue
            this.getList();
        }else{
            this.numIss = this.$route.query.id
            this.getList();
        }
        
        
    },
    methods: {
        toBack(val){
            this.$api.post(this.$url.cancel,{
                ids:val.orderId,
                module:this.saveType
            },res=>{
                console.log(res.data)
                if(res.data.code == 200){
                    this.user.balance = this.user.balance + val.itemAmount;
                    this.$store.commit('getUser',JSON.stringify(this.user))   
                    alert('退码成功！')
                    this.getList();
                }
            })
        },
        toMore(){
            this.pages = 1
            this.curpages = 1
            this.getList();
        },
        fy(val){
            this.pages = val
            this.getList();
        },
        getList() {
            var winType;
            if (this.isWin) {
                winType = 1;
            } else {
                winType = 0;
            }
            var params = {
                pageNum: this.pages,
                pageSize: 100,
                module: this.saveType,
                issue: this.numIss,
                isWin: winType
            };
            this.$api.post(this.$url.orderDetail, params, res => {
                if (res.data.code == 200) {
                    this.total = res.data.count
                    this.list = res.data.data;           
                    this.list.forEach(item=>{
                        item.profit = item.profit*100000
                    })
                    console.log(this.list)
                }
            });
        },

         getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += "";
        } else {
          sums[index] = "";
        }
      });
      sums[2] = "";
      sums[3] = sums[3]/100000
      return sums;
    }
    }
};
</script>

<style lang="less" scoped>
@import "../assets/style/base.less";
.detail {
    padding: 0 5px;
    box-sizing: border-box;
    .title {
        font-size: 16px;
        color: @color2;
        padding: 0 5px;
        box-sizing: border-box;
    }
    .list {
        margin: 10px 0;
    }
}
.inputs{
    width: 40%;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
</style>
